slideToggle() jQuery การแสดง ซ้อน Elements แบบ Slide Toggle
บทความวันที่ 15 พฤศจิกายน 2555
slideToggle() คือ คำสั่งของ jQuery ในหมวดของ Effects มีไว้สำหรับสร้างการทำงานแบบแสดง (Show) และซ้อน (Hide) Elements ในลักษณะแบบ Toggle แต่มี Effect แบบ Effect Slide Up และ Slide Down
ภาพรวมของ slideToggle
1. ใช้สำหรับการซ้อน และแสดง Elements ด้วย Effect แบบ Slide Up และ Slide Down
2. รูปแบบการใช้งานคือ $('[Target_Element]').slideToggle('[Duration]')
3. คำสั่งมี Parameter ที่สำคัญคือ duration (ระยะเวลา), easing (ข้อมูลที่ใช้สำหรับการสื่อสาร) และ callback (Function สำหรับการตอบกลับหลังการประมวลเสร็จ)
ตัวอย่างโปรแกรม
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.min.js"></script>
<title>amplysoft.com</title>
</head>
<body>
<input type='button' value='Slide Toggle' />
<p>amplysoft รับเขียนเว็บ รับทำเว็บ เรียนเขียนโปรแกรม PHP, JAVA, ASP.NET</p>
<div id='result'></div>
<script type="text/javascript">
$(document).ready(function(){
$('input').click(function(){
$('p').slideToggle('slow');
});
});
</script>
</body>
</html>
ผลลัพธ์
คำค้นหา slideToggle() jQuery, รับทำเว็บ, รับเขียนเว็บ, เรียนเขียนโปรแกรม